<template>
	<view>
		<u-navbar v-if="!postDetail" title="该帖子已被删除" :background="{background:'#F8F8F8'}"></u-navbar>
		<view v-if="postDetail" class="h-screen">
			<!-- 导航栏 -->
			<top-navbbar :user="{avatar:postDetail.avatar,name:postDetail.userName,id:postDetail.userId}"
				:background="{background:'#F8F8F8'}" :operation="{	iconShow:true,
				icon: 'zhuanfa',buttonShow: postDetail.userId!==userInfo.id,buttonText: '关注'}" :title="postDetail.title"
				:scroll="pageScroll"></top-navbbar>

			<scroll-view ref="scrollView" style="max-height: 100vh;" scroll-y="true" :refresher-enabled="refresher"
				:refresher-triggered="triggered" @refresherrefresh="refresh()" @scrolltolower="reachBottom()"
				@scroll="scroll">
				<!-- 头像 -->
				<view class="post-head">
					<view @click.stop="jumpUserHome(postDetail.userId)">
						<u-avatar :src="imageUrl(postDetail.avatar)"></u-avatar>
					</view>
					<view class="post-head-center">
						<view class="user-info">
							<view class="username">{{postDetail.userName}}</view>
							<view class="official" v-if="postDetail.roleKey === 'operatorUser'">
								<image class="official-image" :src="'/static/aidex/images/official.png'"></image>
								<view class="official-region">地区</view>
							</view>
						</view>
						<!-- 地区名称 -->
						<view class="schol-name">{{postDetail.regionName}}</view>
					</view>
				</view>

				<view class="info-box">
					<!-- 标题 -->
					<view class="post-title text-2-line">{{postDetail.title}}</view>
					<!--封面-->
					<u-image v-if="postDetail.image" @click="onPreviewImage(postDetail.image,0)" width="100%"
						height="400rpx" :fade="false" style="padding: 20rpx;"
						:src="imageUrl(postDetail.image)"></u-image>
					<!--内容-->
					<view class="post-text">
						<zero-markdown-view :markdown="postDetail.content" themeColor="#000000"></zero-markdown-view>
					</view>
				</view>
				<view class="footer">
					<view class="item">
						<u-tag :text="postDetail.sectionName" style="color: black;" border-color="#e1e1e1"
							bg-color="#e1e1e1" mode="plain"></u-tag>

					</view>
					<view class="item">
						<view class="num-item">
							<u-icon name="/static/platform/icons/view.png" size="60"></u-icon>
							<text class="num">{{postDetail.viewNumber}}</text>
						</view>
						<view class="num-item">
							<u-icon name="/static/platform/icons/like.png" size="60"></u-icon>
							<text class="num">{{postDetail.likeNumber}}</text>
						</view>
						<view class="num-item">
							<u-icon name="/static/platform/icons/reply.png" size="60"></u-icon>
							<text class="num">{{postDetail.replyNumber}}</text>
						</view>
						<view class="num-item">
							<u-icon name="/static/platform/icons/collect.png" size="60"></u-icon>
							<text class="num">{{postDetail.collectNumber}}</text>
						</view>
					</view>
					<view class="item">
						<!-- 发布时间 -->
						<view class="time">
							<view><u-icon class="time-icon" name="edit-pen"></u-icon>发布于</view>
							<view>{{postDetail.publishTime|getPublishTime}}</view>
						</view>
					</view>

				</view>
				<u-gap height="20" bgColor="#F9FAFB"></u-gap>
				<view class="p-20 text-30 font-bold">
					评论<text class="ml-10">({{ postDetail.replyNumber }})</text>
				</view>
				<!-- 评论 -->
				<view class="comment-box">
					<comment-list ref="commentList" :commentList="replyList" @toAllReply="toAllReply"
						@reply="replyComment" @closeCommentDetail="closeCommentDetail"></comment-list>

				</view>
				<!-- 加载状态 -->
				<block v-if="replyList.length > 0">
					<view style="margin: 30rpx;">
						<u-loadmore :status="loadStatus" />
					</view>
				</block>
				<block v-else>
					<u-empty text="暂无评论" mode="message"></u-empty>
				</block>
				<!-- <view> -->
				<view style="height: 100rpx;"></view>
				<!-- 评论输入框 -->
				<u-popup v-model="showReplyInput" mode="bottom" duration="0" @close="replyBlur">
					<view class="reply-input" :style="[toolStyle]">
						<text style="color: #999;margin-bottom: 15rpx;">{{inputTitle}}</text>
						<textarea class="reply-txt" custom-style="" :show-confirm-bar="false" :adjust-position="false"
							v-model="form.content" :focus="focusReply" placeholder="说点什么~"></textarea>
						<view class="r-footer">
							<view @click="replySubmit" class="reply-btn">发送</view>
						</view>
					</view>
				</u-popup>
				<view v-if="!showReplyInput" class="reply-tool">
					<u-avatar :src="imageUrl(userInfo.avatar)" size="60"></u-avatar>
					<view @click="showReplyInput = true;focusReply=true;" class="tips-txt">
						{{showCommentDetail?inputTitle:'我有话要说...'}}
					</view>
					<view style="display: flex;" v-show="!showCommentDetail">
						<view v-if="postDetail.isLike" @click="cancelLikePost" class="icon-wrap">
							<u-icon class="icon" color="#00aaff" name="thumb-up-fill" size="38"></u-icon>
							<text class="num" style="color: #00aaff;">{{postDetail.likeNumber}}</text>
						</view>
						<view v-else @click="likePost" class="icon-wrap">
							<u-icon class="icon" name="thumb-up" size="38"></u-icon>
							<text class="num">{{postDetail.likeNumber}}</text>
						</view>
						<view class="icon-wrap">
							<u-icon class="icon" name="chat" size="38"></u-icon>
							<text class="num">{{postDetail.replyNumber}}</text>
						</view>
						<button class="u-reset-button icon-wrap" open-type="share">
							<u-icon class="icon" name="share" size="45"></u-icon>
						</button>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-else>
			<u-empty text="该帖子已被删除" src="/static/platform/svg/autumn.svg" font-size="32" icon-size="320"
				margin-top="200" mode="list"></u-empty>
		</view>
	</view>

</template>

<script>
	import CommentList from '@/pages/platform/comment/comment-list.vue'
	export default {
		components: {
			CommentList
		},
		data() {
			return {
				showReplyInput: false,
				focusReply: false,
				showCommentDetail: false,
				inputTitle: '发表评论',
				postDetail: {},
				form: {
					pid: undefined,
					userId: undefined,
					postId: undefined,
					content: undefined,
					replyNumber: 0,
					likeNumber: 0,
					reportNumber: 0,
					status: '0'
				},
				commentQuery: {
					pageNo: 1,
					pageSize: 10,
					postId: undefined
				},
				loadStatus: 'loadmore',
				replyList: [],
				toolStyle: {},
				chooseComment: {},
				triggered: false,
				refresher: true,
				pageScroll: 0,
			};
		},
		computed: {
			userInfo() {
				return this.vuex_user
			},
		},
		filters: {
			getPublishTime(dateString) {
				return uni.$u.timeFrom(new Date(dateString), false)
			},
		},
		onLoad(options) {
			this.form.postId = options.id;
			this.getPostDetail();
			this.onKeyboardChange();
		},
		methods: {
			scroll(e) {
				this.pageScroll = e.detail.scrollTop
			},
			resetQuery() {
				this.commentQuery.pageNo = 1
				this.loadStatus = 'loadmore'
			},
			refresh() {
				this.triggered = true
				this.resetQuery()
				this.getPostDetail()
				setTimeout(() => {
					// 停止下拉刷新
					this.triggered = false;
				}, 500)
			},
			reachBottom() {
				if (this.loadStatus !== "nomore") {
					this.commentQuery.pageNo++;
					this.getReplyList();
				}
			},
			jumpUserHome(uid) {
				uni.navigateTo({
					url: "/pages/platform/user/user-space?uid=" + uid
				})
			},
			onPreviewImage(imgArray, index) {
				const imageList = []
				imageList.push(this.imageUrl(imgArray))
				uni.previewImage({
					current: index,
					urls: imageList
				})
			},
			closeCommentDetail() {
				this.form.pid = undefined
				this.showCommentDetail = false
				this.inputTitle = '发表评论'
			},
			replyComment(comment) {
				this.showReplyInput = true;
				this.focusReply = true
				this.inputTitle = "回复 " + comment.userName
				this.form.pid = comment.id
			},
			toAllReply(comment) {
				this.chooseComment = comment
				this.showCommentDetail = true
				this.inputTitle = "回复 " + comment.userName
				this.form.pid = comment.id
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
			navigateBack() {
				uni.navigateBack();
			},
			onKeyboardChange() {
				uni.onKeyboardHeightChange(res => {
					this.toolStyle = {
						"bottom": res.height + "px"
					}
				})
			},

			reloadCommentDetail() {
				if (this.showCommentDetail) {
					this.chooseComment = this.replyList.find(item => item.id === this.chooseComment.id)
					this.$refs.commentList.reloadAllReply(this.chooseComment)
				}
			},

			//评论列表
			getReplyList() {
				this.commentQuery.postId = this.form.postId
				this.loadStatus = "loading"
				this.$u.api.commentData.list(this.commentQuery).then(res => {
					if (res.data.records.length > 0) {
						if (this.commentQuery.pageNo !== 1) {
							this.replyList.push(...res.data.records)
						} else {
							this.replyList = res.data.records
						}
						if (this.replyList.length < this.commentQuery.pageSize) {
							this.loadStatus = "nomore"
						} else {
							this.loadStatus = "loadmore"
						}
						this.reloadCommentDetail()
					} else {
						this.loadStatus = "nomore"
					}
				})
			},

			// 发布评论
			replySubmit() {
				this.form.userId = this.vuex_user.id
				this.$u.api.commentData.add(this.form)
					.then(res => {
						if (res.code == 200) {
							this.form.content = '';
							this.form.pid = undefined;
							this.showReplyInput = false;
							this.replyList = [];
							this.commentQuery.pageNo = 1;
							this.postDetail.replyNumber++;
							this.getReplyList();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})

							uni.hideLoading();
						}
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			//失去评论焦点
			replyBlur() {
				if (!this.showCommentDetail) {
					this.form.pid = undefined
					this.inputTitle = '发表评论'
				} else {
					this.$refs.commentList.getCommentDetail()
					this.showReplyInput = false;
					this.focusReply = false
				}


			},
			handelSwiper(index) {
				uni.previewImage({
					current: index,
					urls: this.postDetail.img_list
				});
			},
			getPostDetail() {
				this.$u.api.postData.getPost({
						id: this.form.postId
					})
					.then(res => {
						this.postDetail = res.data;
						this.getReplyList();

					});
			},
			onCopy() {
				let that = this;
				uni.setClipboardData({
					data: this.postDetail.content,
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			jumpUser(uid) {
				uni.navigateTo({
					url: '/pages/user/home?uid=' + uid
				});
			},
			likePost() {
				let userLike = {
					itemId: this.postDetail.id
				}
				this.$u.api.postData.likePost(userLike).then(res => {
					if (res.data) {
						this.postDetail.isLike = true
						this.postDetail.likeNumber++;
					}

				})
			},
			cancelLikePost() {
				let userLike = {
					itemId: this.postDetail.id
				}
				this.$u.api.postData.likePost(userLike).then(res => {
					if (res.data) {
						this.postDetail.isLike = false
						this.postDetail.likeNumber--;
					}
				})
			},
			// 删除评论
			delReply(id, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除评论？',
					success: function(res) {
						if (res.confirm) {
							that.$H.post("reply/del", {
								id: id,
								post_id: that.form.post_id
							}).then(res => {
								if (res.code == 200) {
									that.replyList.splice(index, 1);
									that.postDetail.reply_num--
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.post-head {
		background-color: white;
		display: flex;
		margin: 20rpx 10rpx;

		.post-head-center {
			flex: 1;
			margin: 0 20rpx;

			.user-info {
				display: flex;
				align-items: center;

				.username {
					color: #010101;
					font-size: 14px;
					font-weight: 600;
					margin-right: 5px;
				}

				.official {
					display: flex;
					align-items: center;

					.official-image {
						width: 14px;
						height: 14px;
						padding: 2px;
						line-height: 1;
						margin-right: 5px;
						vertical-align: middle;
					}

					.official-region {
						height: 14px;
						background-image: linear-gradient(to right, $themes-color, $sub-color);
						color: #fff;
						border-radius: 3px;
						font-size: 10px;
						padding: 0px 5px;
						margin-right: 5px;
					}

				}


			}

			.schol-name {
				margin-top: 8rpx;
				font-size: 11px;
				color: #999;
			}


		}
	}



	.post-title {
		margin: 5rpx 20rpx;
		color: #1d2129;
		font-size: 38rpx;
		font-weight: 700;
	}

	.text-2-line {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.icon text {
		font-size: 12px;
		color: #999;
		margin-right: 20rpx;
	}

	/*关注*/

	.user-wrap {
		display: flex;
		align-items: center;
		padding: 20rpx 200rpx 20rpx 20rpx;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			margin-right: 10rpx;
			border-radius: 50%;
		}

		.btn {
			border: 1px solid #F5F5F5;
			border-radius: 50rpx;
			font-size: 20rpx;
			margin-left: auto;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			line-height: 1;
			padding: 10rpx 20rpx;
		}
	}

	.footer {
		display: flex;
		flex-direction: column;
		margin: 5rpx 20rpx;


		.item {
			display: flex;
			flex-direction: row;

			.num-item {
				margin-top: 20rpx;
				margin-right: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				color: #999;
				font-size: 20rpx;
				border-radius: 5px;
				border: #eee solid 2px;

				.num {
					margin-left: 5rpx;
					vertical-align: baseline;
				}
			}

			.time {
				display: flex;
				font-size: 22rpx;
				color: #999;
				line-height: 1.8;
				margin: 20rpx 0;

				.time-icon {
					margin-right: 5rpx;
				}
			}

		}


	}


	/*评论列表*/
	.comment-box {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx;
	}

	.comment-box>.title {
		margin-bottom: 20rpx;
	}

	.comment-item {
		display: flex;
		padding: 20rpx;

		&:active {
			background-color: #f5f5f5;
		}

		.c-content {
			display: flex;
			flex-direction: column;
			flex: 1;

			.time {
				color: #999;
				font-size: 10px;
			}

			.user {
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 1px solid #dd524d;
			margin-right: 20rpx;
		}
	}

	.post-text {
		margin-bottom: 50rpx;
	}


	// 评论tool
	.reply-tool {
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		background-color: #F5F7F8;
		z-index: 999;
		border-top: 1px solid #d8d8d8;

		.tips-txt {
			flex: 1;
			background-color: #fff;
			font-size: 26rpx;
			margin-left: 20rpx;
			padding: 15rpx 20rpx;
			border-radius: 10rpx;
			color: #999;
		}

		.icon-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 20rpx;

			.num {
				color: #000;
				font-size: 24rpx;
			}
		}
	}

	.reply-input {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		background-color: #fff;
		z-index: 999;
		border-top: 1px solid #eee;

		.reply-txt {
			background-color: #F5F5F5;
			border-radius: 20rpx;
			font-size: 28rpx;
			width: calc(100% - 60rpx);
			padding: 30rpx;
			height: 200rpx;
		}

		.r-footer {
			margin-top: 20rpx;
			display: flex;

			.reply-btn {
				display: inline-block;
				background-image: linear-gradient(to right, #0055ff, #55aaff);
				margin-left: auto;
				padding: 10rpx 40rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
			}
		}
	}
</style>